<template>
  <div>
    <div style="width:100%;">
      <yd-flexbox>
        <yd-flexbox-item style="height:20%;">
          <div style="padding:10px">
            <img src="https://hd-huludao.oss-cn-qingdao.aliyuncs.com/huyue_img.jpeg" class="tj-imgs">
          </div> 
        </yd-flexbox-item>
        <yd-flexbox-item style="height:2.5rem;">
          <yd-flexbox direction="vertical" style="padding:10px;font-size:14px">

            <yd-flexbox-item>{{item.name}}</yd-flexbox-item>
            <yd-flexbox-item>租车公司</yd-flexbox-item>
            <yd-flexbox-item>
              <div>
                <yd-rate slot="left" v-model="item.star" size="15px" color="#00FF16" :readonly="true"  active-color="#0078D7"></yd-rate>
              </div>
            </yd-flexbox-item>
        </yd-flexbox>
          <!-- <div style="height:30%;">{{item.name}}</div>
          <div style="height:30%;">租车公司</div>
          <div style="height:40%;"><yd-rate slot="left" v-model="item.star" size="12px" color="#00FF16" active-color="#0078D7"></yd-rate></div> -->
        </yd-flexbox-item>
        <yd-flexbox-item style="height:100px;padding-top:0px;padding-right:0px">
          <router-link :to="{path:'addComplaint',query: {source_id:item.place_id,source_name:item.name,type:item.type}}">
            <div class="complaint">
                <hd-svg-icon name="hd-icon-yxj-complaint" size="20px" color="red" style="margin-top:3px;"></hd-svg-icon>
                <span  v-if="this.collectionState === '0'" @click="addCollection()" >
                  <hd-svg-icon name="hd-shoucang" size="25px" color="#333333" style="margin-top:3px"  ></hd-svg-icon>
                </span>
                <span  v-if="this.collectionState === '1'" @click="cancelCollection()">
                  <hd-svg-icon name="hd-shoucang1" size="25px" style="margin-top:3px"></hd-svg-icon>
                </span>
            </div>
          </router-link>
          
          
          <p class="address">永昌路</p>
        </yd-flexbox-item>
      </yd-flexbox>
    </div> 
    <div style="height:10%;margin-top:10px">
      <yd-flexbox>
        <div style="padding-left:20px;width:85%">
          <hd-svg-icon name="hd-dingwei" color="#8794F5" size=".5rem" class="hdicon"></hd-svg-icon>
          <span style="width:80%">{{item.address}}</span>
        </div>
        <div style="float:right">
          <!-- <a :href="'tel:' + phone ">{{ phone }}</a> -->
          <hd-svg-icon name="hd-dianhua" color="#8794F5" size=".5rem" class="hdicon"></hd-svg-icon>
        </div>
      </yd-flexbox>
    </div>
    <div class="line-div"></div>
    <div style="margin-top:5px;height:200px">
      <yd-slider autoplay="3000" style="height:200px">
        <yd-slider-item v-for="pic in pictures_arr" :key="pic.index" style="height:200px">
            <a href="http://www.ydcss.com">
                <img :src="pic" height:200px>
            </a>
        </yd-slider-item>
      </yd-slider>
    </div>
    <div style="padding-left:30px; padding-top:10px">
      <span>交通:</span>
    </div>
    <div style="padding-left:60px; padding-top:10px">
      <span>坐123倒148倒123倒271倒254倒蓝藻的</span>
    </div>
    <div class="line-div"></div>
    <div style="margin:10px;border:1px solid;padding:10px">
      <span style="font-size:15px">租车公司信息</span>
      <div  style="padding:10px">
        <yd-flexbox>
          <div style="width:10%">
            <hd-svg-icon name="hd-zhongbiao" color="" size=".5rem" class="hdicon"></hd-svg-icon>
          </div>
          <div>营业和时间:{{item.open_date}}
            <div>{{item.open_time}}</div>
          </div>
      </yd-flexbox>
      </div>
      <div>简介:</div>
      <div style="margin-top:15px;margin-left:20px" v-html="item.content"></div>
      <div style="margin-top:10px">
        <yd-flexbox style="width:100%;flex-wrap: wrap;padding-left:12%" >
          <div v-for="information in showinformation" :key="information.index" style="width:1.8rem;">
            <hd-svg-icon :name="information.image" color="" size=".3rem" class="hdicon"></hd-svg-icon>
            {{information.label}}
          </div>
        </yd-flexbox>
      </div>
      </div>
      <div class="youkedianpingtitle" id="youkedianping">游客点评<yd-button type="danger" bgcolor="#FF9800" color="#fff" style="float:right;"><router-link :to="{path:'lovepingnoping',query: {id:item.place_id,type:'T',title:item.name,place_image:item.pictures_arr[0]}}">爱评不评</router-link></yd-button></div>
      <div class="youkedianpingbody">
        <yd-flexbox>
          <yd-flexbox-item style="padding-right:10px;height:46px;text-align: center;" align="center">
           <span class="math">{{pingjunfen.average}} </span>分 {{oyisi}}<br>高于{{SorceAsc}}%同类企业
          </yd-flexbox-item>
          <!-- <yd-flexbox-item align="left" style="padding-left:10px;">
                位置：4.2&nbsp;&nbsp;&nbsp;&nbsp;美味：4.5 <br>
                服务：4.1&nbsp;&nbsp;&nbsp;&nbsp;卫生：4.2
          </yd-flexbox-item> -->
        </yd-flexbox>
      </div>
      <!-- 分割线 -->
      <div class="line-div"></div>
      <!-- 评论列表 -->
      <div class="speakbody" v-for="(spitems,$index) in speakdata" :key="$index">
        <yd-flexbox class="speaktop">
          <div class="speakheadimg"><img :src="spitems.headimgurl" alt=""></div>
          <yd-flexbox-item style="padding: 0px 10px;float:left;">
            <router-link :to="{path:'speak_detail',query: {id:spitems.id}}">
            <div class="nickname">
              {{spitems.nickname}}
              <span style="float:right">{{spitems.create_time}}</span> 
              <br>
            </div>
            <div class="starspeak">
              打分&nbsp;<yd-rate v-model="spitems.score" readonly="readonly" count="5" color="#ff9800" activeColor="#ff9800" size="12px" padding="1px"></yd-rate>  ¥{{spitems.consumption}}/人
            </div>
            <div class="pinglun">
              {{spitems.content}}
            </div>
            </router-link>
            <div class="spimg" style="height:60px;overflow-y:hidden">
              <yd-lightbox :num="spitems.imagearr.length" style="padding:5px;width:100%">
                <yd-lightbox-img v-for="(item, index) in spitems.imagearr" :key="index" :src="item" style="width:30%;height:60px;margin-left:5px"></yd-lightbox-img>
              </yd-lightbox>
            </div>
            <div class="lookcz">
              <yd-flexbox>
                <yd-flexbox-item>浏览{{spitems.see}}</yd-flexbox-item>
                <yd-flexbox-item style="text-align:right;">
                  <span v-if="spitems.zan=='0'" @click="addZan(spitems.comment_id,spitems.place_id)">                  
                    <hd-svg-icon name="hd-xin2" size="15px" color="#bbbbbb" class="" ></hd-svg-icon>{{spitems.fabulous}}
                  </span>
                  <span v-if="spitems.zan!='0'" @click="cancelZan(spitems.comment_id,spitems.place_id)">                  
                    <hd-svg-icon name="hd-xin-" size="15px" color="#bbbbbb" class="" ></hd-svg-icon>{{spitems.fabulous}}
                  </span>
                </yd-flexbox-item>
              </yd-flexbox>
            </div>
          </yd-flexbox-item>
          <!-- <div style="padding-top:0px;width:15%">{{spitems.create_time}}</div> -->
        </yd-flexbox>
      </div>
  </div>
</template>

<script>
export default {
  name: 'demo',
  data () {
    return {
      SorceAsc: '',
      pingjunfen: '',
      speakdata: [],
      imagelist: [],
      collectionState: '',
      item: {},
      username: '',
      mobile: '',
      idcard: '',
      result: '',
      search: '',
      outdata: '',
      // swiper 参数设置 详见
      swiperOption: {
        pagination: '.swiper-pagination',
        slidesPerView: 'auto',
        centeredSlides: true,
        paginationClickable: true,
        spaceBetween: 30,
        loop: true
      },
      infortationarr: [
        {
          label: '免费wifi',
          image: 'hd-iconfontwifi1',
          value1: '0',
          checked: false
        },
        {
          'label': '停车场',
          'image': 'hd-tingchechang',
          'value1': '1',
          'checked': false
        },
        {
          'label': '接送服务',
          'image': 'hd-jiesongfuwu',
          'value1': '2',
          'checked': false
        },
        {
          'label': '行李寄存',
          'image': 'hd-xinglijicun',
          'value1': '3',
          'checked': false
        },
        {
          'label': '餐厅',
          'image': 'hd-canting',
          'value1': '4',
          'checked': false
        },
        {
          'label': '24h热水',
          'image': 'hd-24xiaoshireshui',
          'value1': '5',
          'checked': false
        },
        {
          'label': '吹风机',
          'image': 'hd-chuifengji',
          'value1': '6',
          'checked': false
        },
        {
          'label': '免费洗漱用品',
          'image': 'hd-mianfeixishuyongpin',
          'value1': '7',
          'checked': false
        },
        {
          'label': '叫醒服务',
          'image': 'hd-jiaoxingfuwu',
          'value1': '8',
          'checked': false
        },
        {
          'label': '送餐服务',
          'image': 'hd-songcanfuwu',
          'value1': '9',
          'checked': false
        },
        {
          'label': '会议室',
          'image': 'hd-huiyishi',
          'value1': '10',
          'checked': false
        },
        {
          'label': '商务中心',
          'image': 'hd-shangwuzhongxinr',
          'value1': '11',
          'checked': false
        },
        {
          'label': '可吸烟',
          'image': 'hd-icon_smoke',
          'value1': '12',
          'checked': false
        }
      ],
      array: [],
      showinformation: [],
      pictures_arr: []
    }
  },
  mounted: function() {
    this.load();
    console.log(this.$route.query);
    console.log('上面是$route.query')
    this.$parent.title = this.$route.query.name;
  },
  methods: {
    load() {
      this.item = this.$route.query;
      console.log(this.item);
      console.log('$#%$#^$%&%*')
      if (this.item.pictures_arr.length !== 0) {
        this.pictures_arr = this.item.pictures_arr.split(',');
      }
      console.log(this.item.infomation.split(','));
      this.array = this.item.infomation.split(',');
      this.infortationarr.forEach(function(element) {
        this.array.forEach(function(list) {
          if (list === element.value1) {
            this.showinformation.push(element);
            console.log(this.showinformation);
          }
        }, this);
      }, this);
      this.hdAjax({
        url: this.API.getCollectionState,
        data: {
          source_id: this.item.place_id
        },
        success: (resultData) => {
          this.collectionState = resultData.data.state;
          // console.log('===========>' + this.collectionState)
        }
      });
      this.hdAjax({
        method: 'POST',
        url: this.API.createFootprint,
        data: {
          id: this.item.place_id,
          type: 'T'
        },
        success: (resultData) => {
          // this.collectionState = resultData.data.state;
          console.log('===========>' + 'success')
        }
      });
      this.hdAjax({
        url: this.API.findCommentList,
        data: {
          // type: 'J',
          place_id: this.item.place_id
        },
        success: (resultData) => {
          // this.speakdata = resultData.data.results;
          resultData.data.results.forEach(function(element) {
            element['imagearr'] = element.image.split(',');
            this.speakdata.push(element);
            console.log(this.speakdata);
          }, this);
          console.log('上面是speakdata');
        }
      });
      this.hdAjax({
        url: this.API.findAverage,
        data: {
          // type: 'J',
          place_id: this.$route.query.id || this.$route.query.place_id
        },
        success: (resultData) => {
          this.pingjunfen = resultData.data;
          if (resultData.data.average <= 5.0 && resultData.data.average >= 4.0) {
            this.oyisi = '非常赞'
          }
          if (resultData.data.average < 4.0 && resultData.data.average >= 3.0) {
            this.oyisi = '很好'
          }
          if (resultData.data.average < 3.0 && resultData.data.average >= 2.0) {
            this.oyisi = '一般'
          }
          if (resultData.data.average < 2.0 && resultData.data.average >= 1.0) {
            this.oyisi = '差'
          }
          if (resultData.data.average < 1.0 && resultData.data.average >= 0.0) {
            this.oyisi = '极差'
          }
        }
      });
      this.hdAjax({
        url: this.API.getSorceAsc,
        data: {
          place_type: 'H',
          id: this.$route.query.id
        },
        success: (resultData) => {
          this.SorceAsc = resultData.data.bunum
        }
      });
    },
    info() {
      alert('123');
    },
    addCollection() {
        // alert('!!!!!')
      this.hdAjax({
        method: 'POST',
        url: this.API.createCollection,
        data: {
          id: this.item.place_id,
          type: 'T'
        },
        success: (resultData) => {
          this.$dialog.toast({mes: '您已成功收藏!'})
          this.hdAjax({
            url: this.API.getCollectionState,
            data: {
              source_id: this.item.place_id
            },
            success: (resultData) => {
              this.collectionState = resultData.data.state;
              // console.log('===========>' + this.collectionState)
            }
          });
        }
      });
    },
    cancelCollection() {
      // alert('!!!!!')
      this.hdAjax({
        method: 'post',
        url: this.API.createCollection,
        data: {
          id: this.item.place_id,
          type: 'T'
        },
        success: (resultData) => {
          this.$dialog.toast({mes: '您已取消收藏!'})
          this.hdAjax({
            url: this.API.getCollectionState,
            data: {
              source_id: this.item.place_id
            },
            success: (resultData) => {
              this.collectionState = resultData.data.state;
              // console.log('===========>' + this.collectionState)
            }
          });
        }
      });
    },
    addZan(cid, pid) {
      console.log(cid);
      console.log(pid);
      this.hdAjax({
        method: 'POST',
        url: this.API.updateFabulous,
        data: {
          comment_id: cid,
          place_id: pid,
          fabulous_state: '1'
        },
        success: (resultData) => {
          this.$dialog.toast({mes: '点赞成功!'})
          this.speakdata.forEach(function(element) {
            if (element['comment_id'] === cid) {
              console.log(element['zan']);
              element['zan'] = '1';
              element['fabulous'] = element['fabulous'] + 1;
            }
          }, this);
        }
      });
    },
    cancelZan(cid, pid) {
      console.log(cid);
      console.log(pid);
      this.hdAjax({
        method: 'POST',
        url: this.API.updateFabulous,
        data: {
          comment_id: cid,
          place_id: pid,
          fabulous_state: '0'
        },
        success: (resultData) => {
          this.$dialog.toast({mes: '取消成功!'})
          this.speakdata.forEach(function(element) {
            if (element['comment_id'] === cid) {
              console.log(element['zan']);
              element['zan'] = '0';
              element['fabulous'] = element['fabulous'] - 1;
            }
          }, this);
        }
      });
    }
  }
}
</script>

<style>
body{
  font-family: '微软雅黑'
}
header{
  background-color: #393A3F;
}
.tj-imgs{
  height: 2.5rem;
  width: 100%;
  float:left
}
.yd-input{
  width: 100%;
}
.yd-input input{
  width: 100%;
}
.swidiv{
  float: left;
}
.mapbut{
  border: 1px solid #000;
  border-radius: 20px;
  background: #fff;
  text-align: center;
  position: fixed;
  width: 25%;
  height: 35px;
  line-height: 35px;
  left: 37.5%;
  bottom: 10px;
  z-index: 100;
}
.xbtdiv{
  /* padding-top:10px; */
  margin-top:10px;
  margin-left: 40%;
  font-size: 0.4rem;
}
.adddiv{
  padding-top:5px;
  margin-left: 40%;
  font-size: 0.3rem;
  margin-top: 5px;
}
.mapbut .icon-ucenter-outline:before {
  content: "\E616";
  color: #000;
}
.skljx{
  width: 100%;
  height: 80px;
  padding: 5px 10px;
}
.skljxt{
  font-size: 14px;
}
.skljgl{
  position: relative;
  border-radius: 15px;
  top: -120px;
  left: 10px;
  width: 30px;
  height: 25px;
}
.skljxt2{
  font-size: 12px;
}
.skljxr{
  float: right;
  font-size: 12px;
}
.zn{
  position: relative;
  border-radius: 15px;
  top: -48px;
  left: -110px;
  width: 30px;
  height: 25px;
}
.ddxgzn{
  position: relative;
  border-radius: 15px;
  top: -40px;
  left: 10px;
  width: 30px;
  height: 25px;
}
.ddxg img{
  width: 100%;
  height: 300px;
}
.sklj img{
  width: 100%;
  height: 300px;
}
.icon-ucenter-outline:before {
    content: "\E616";
    color: #fff;
}
.back-icon:before {
    content: "\E607";
    color: #fff;
}
element.style {
    color: #fff;
}
.navbar-item>a {
  color: #fff;
}
.headimg img{
  width: 100%;
  height: 250px;
}
.condiv{
  padding: 10px 10px;
}
.condiv button{
  font-size: 14px;
  width: 40%;
  height: 45px;
}
.m-cell {
  background-color: #218B98;
  padding: 10px;
  margin-bottom: -10px;
}
.cell-item{
  height: 40px;
  padding: 0px;
  background-color: #fff;
  border-radius: 8px;
}
.cell-right{
  min-height: 0px;
}
.imgsli{
  min-width: 100%;
  height: 300px;
}
.imgsli li{
  float: left;
  width: 70%;
  height: 300px;
  border: 2px solid #000;
}
.zdytop{
  margin-top: 10px;
  width: 100%;
  height: 50px;
  padding: 10px;
}
.zdyleft{
  float: left;
  width: 50%;
  height: 50px;
  margin-left: 0px;
  float: left;
  text-align: left;
}
.zdyleft-top{
  font-size: 18px;
}
.zdyleft-button{
  color: #D0D0D0;
}
.zdyright{
  float: right;
  font-size: 12px;
  width: 50%;
  height: 30px;
  margin-right: 0px;
  text-align: right;
  line-height: 30px;
}
.fengexian{
  margin-left: 2%;
  width: 96%;
  border-bottom: 1.5px solid #999999;
  margin-top: 15px;
}
.swiper-container {
  width: 100%;
  /* margin: 20px auto; */
}
.line-div{
  margin-top:20px;
  border-top: 1px solid #bbbbbb;
  margin-left:5%;
  width: 90%;
}
.swiper-slide {
  float: left;
  text-align: left;
  font-size: 18px;
  background: #fff;
  width: 60%;

  /* Center slide text vertically */
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.imgjxx{
  position:relative;
  float: left;
  width: 300px;
}
.imgxl{
  float: left;
  margin-top: 3px;
  width: 50%;
  height: 60px;
}
.imgxlt{
  font-size: 14px;
}
.imgxlb{
  font-size: 12px;
}
.imgxr{
  float: right;
  text-align: center;
  margin-top: 3px;
  width: 100px;
  font-size: 12px;
  display: -webkit-box; 
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical; 
  overflow: hidden;
  /* overflow:hidden;
  text-overflow:ellipsis; 
  white-space: nowrap; */
}
.address{
  position: absolute;
  top: 85px;
  padding: 15px;
  margin: 0px
}
.complaint{
  position: absolute;
  top: 10px;
  padding-left: 40px;
  margin: 0px
}
/* .collection{
  float:right;
  margin-right: 10px;
  margin-top: -180px;
  position: relative;
  width: 45px;
  height: 20px; 
  text-align:center
} */
.youkedianpingtitle{
  width: 90%;
  height: 50px;
  margin-left: 5%;
  margin-top: 10px;
  font-size: 15px;
}
.youkedianpingbody{
  width: 90%;
  margin-left: 5%;
}
.math{
  font-size: 20px;
  color: orange;
}
.speak{
  margin-bottom: 49px;
}
.speakbody{
  margin-top: 20px;
  width: 90%;
  margin-left: 5%;
  padding-bottom: 15px;
  border-bottom: 1px solid #bbbbbb;
}
.speakheadimg{
  height: 138px;
}
.speakheadimg img{
  width: 50px;
  height: 50px;
  border-radius: 50px;
}
.nickname{
  width: 100%;
  margin-top: 0px;
}
.starspeak{
  display: inline-flex;
  margin-top: 10px;
}
.pinglun{
  width: 100%;
  margin-top: 5px;
}
.lookcz{
  width: 100%;
  margin-top: 5px;
}
</style>
